<template>
  <div>
    <button>home</button>
    <button @click="goAbout">about</button>
    <button @click="forwards">forwards</button>
  </div>
  <router-view />
</template>
<script setup>
  import { useRouter } from 'vue-router'
  let router = useRouter()
  // const goAbout = () => router.push('/about?id=124')
  // router 就等价于之前我们使用的this.$router 因为组合入口函数中没有this所以这里需要使用路由跳转的组合api
  // const goAbout = () => router.push({
  //   path: '/about',
  //   query: {
  //     id: 124
  //   }
  // })
  const forwards = () => router.forward()
  const goAbout = () => router.replace({
    path: '/about',
    query: {
      id:124
    }
  })
</script>

<style lang="scss">
</style>
